import PropTypes from 'prop-types';
import React from 'react';
import Modal from '../../containers/modal.jsx';
import Box from '../box/box.jsx';

import booleanInputIcon from './icon--boolean-input.svg';
import textInputIcon from './icon--text-input.svg';
import labelIcon from './icon--label.svg';

import styles from './custom-procedures.css';


const CustomProcedures = props => (
    <Modal
        className={styles.modalContent}
        contentLabel="制作新的积木"
        onRequestClose={props.onCancel}
    >
        <Box
            className={styles.workspace}
            componentRef={props.componentRef}
        />
        <Box className={styles.body}>
            <div className={styles.optionsRow}>
                <div
                    className={styles.optionCard}
                    role="button"
                    tabIndex="0"
                    onClick={props.onAddTextNumber}
                >
                    <img className={styles.optionIcon} src={textInputIcon} />
                    <div className={styles.optionTitle}>添加输入项</div>
                    <div className={styles.optionDescription}>数字或文本</div>
                </div>
                <div
                    className={styles.optionCard}
                    role="button"
                    tabIndex="0"
                    onClick={props.onAddBoolean}
                >
                    <img className={styles.optionIcon} src={booleanInputIcon} />
                    <div className={styles.optionTitle}>添加输入项</div>
                    <div className={styles.optionDescription}>布尔值</div>
                </div>
                <div
                    className={styles.optionCard}
                    role="button"
                    tabIndex="0"
                    onClick={props.onAddLabel}
                >
                    <img className={styles.optionIcon} src={labelIcon} />
                    <div className={styles.optionTitle}>添加文本标签：</div>
                </div>
            </div>
            <div className={styles.checkboxRow}>
                <label>
                    <input
                        checked={props.warp}
                        type="checkbox"
                        onChange={props.onToggleWarp}
                    />
                    "运行时不刷新屏幕
                </label>
            </div>
            <Box className={styles.buttonRow}>
                <button className={styles.cancelButton} onClick={props.onCancel} >
                    取消
                </button>
                <button className={styles.okButton} onClick={props.onOk} >
                    完成
                </button>
            </Box>
        </Box>
    </Modal>
);

CustomProcedures.propTypes = {
    componentRef: PropTypes.func.isRequired,
    onAddBoolean: PropTypes.func.isRequired,
    onAddLabel: PropTypes.func.isRequired,
    onAddTextNumber: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    onOk: PropTypes.func.isRequired,
    onToggleWarp: PropTypes.func.isRequired,
    warp: PropTypes.bool.isRequired
};

export default CustomProcedures;
//export default injectIntl(CustomProcedures);
